<template>
	<div id="app" class="xm-select-doc is-component">
		<main-header></main-header>
		<div class="main-cnt">
			<el-scrollbar ref="componentScrollBar" class="page-component__scroll">
				<div class="page-container page-component">
					<el-scrollbar class="page-component__nav">
						<side-nav :base="``" :data="navsData"></side-nav>
					</el-scrollbar>
					<div class="page-component__content">
						<router-view class="content"></router-view>
					</div>
					<el-backtop :bottom="150" :right="10" target=".page-component__scroll .el-scrollbar__wrap">
						<div class="base-backtop">
							<i class="layui-icon layui-icon-top" style="font-size: 40px;"></i>
						</div>
					</el-backtop>
				</div>
			</el-scrollbar>
		</div>
	</div>
</template>

<script>
import navsData from './router.js';
import throttle from 'throttle-debounce/throttle';
import SideNav from './components/side-nav.vue';
import MainHeader from './components/header.vue'

export default {
	components: {
		SideNav, MainHeader
	},
	data() {
		return {
			lang: this.$route.meta.lang,
			navsData,
			scrollTop: 0,
			showHeader: true,
			componentScrollBar: null,
			componentScrollBoxElement: null
		};
	},
	watch: {
		'$route.path'() {
			// 触发伪滚动条更新
			this.componentScrollBox.scrollTop = 0;
			this.$nextTick(() => {
				this.componentScrollBar.update();
			});
		}
	},
	methods: {
		renderAnchorHref() {
			if (/changelog/g.test(location.href)) return;
			const anchors = document.querySelectorAll('h2 a,h3 a,h4 a,h5 a');
			const basePath = location.href.split('#').splice(0, 2).join('#');

			[].slice.call(anchors).forEach(a => {
				const href = a.getAttribute('href');
				a.href = basePath + href;
			});
		},

		goAnchor() {
			if (location.href.match(/#/g).length > 1) {
				const anchor = location.href.match(/#[^#]+$/g);
				if (!anchor) return;
				const elm = document.querySelector(anchor[0]);
				if (!elm) return;

				setTimeout(_ => {
					this.componentScrollBox.scrollTop = elm.offsetTop;
				}, 50);
			}
		},

		handleScroll() {
			const scrollTop = this.componentScrollBox.scrollTop;
			if (this.showHeader !== this.scrollTop > scrollTop) {
				this.showHeader = this.scrollTop > scrollTop;
			}
			if (scrollTop === 0) {
				this.showHeader = true;
			}
			if (!this.navFaded) {
				this.$emit('fadeNav');
			}
			this.scrollTop = scrollTop;
		}
	},
	created() {
		this.$on('navFade', val => {
			this.navFaded = val;
		});
	},
	mounted() {
		this.componentScrollBar = this.$refs.componentScrollBar;
		this.componentScrollBox = this.componentScrollBar.$el.querySelector('.el-scrollbar__wrap');
		this.throttledScrollHandler = throttle(300, this.handleScroll);
		this.componentScrollBox.addEventListener('scroll', this.throttledScrollHandler);
		this.renderAnchorHref();
		this.goAnchor();
		document.body.classList.add('is-component');
	},
	destroyed() {
		document.body.classList.remove('is-component');
	},
	beforeDestroy() {
		this.componentScrollBox.removeEventListener('scroll', this.throttledScrollHandler);
	},
	beforeRouteUpdate(to, from, next) {
		next();
		setTimeout(() => {
			const toPath = to.path;
			const fromPath = from.path;
			if (toPath === fromPath && to.hash) {
				this.goAnchor();
			}
			if (toPath !== fromPath) {
				document.documentElement.scrollTop = document.body.scrollTop = 0;
				this.renderAnchorHref();
			}
		}, 100);
	}
};
</script>
<style lang="less">
.page-component__scroll {
	height: calc(100% - 80px);
	margin-top: 80px;

	& > .el-scrollbar__wrap {
		overflow-x: auto;
	}
}

.base-backtop {
	height: 100%;
	width: 100%;
	box-shadow: 0 0 6px rgba(0, 0, 0, .12);
	text-align: center;
	background-color: rgb(0, 150, 136);
	line-height: 40px;
	color: #FFF;
}

.page-component {
	box-sizing: border-box;
	height: 100%;

	&.page-container {
		padding: 0;
	}

	.page-component__nav {
		width: 240px;
		position: fixed;
		top: 0;
		bottom: 0;
		margin-top: 80px;
		transition: padding-top .3s;

		& > .el-scrollbar__wrap {
			height: 100%;
			overflow-x: auto;
		}

		&.is-extended {
			padding-top: 0;
		}
	}

	.side-nav {
		height: 100%;
		padding-top: 50px;
		padding-bottom: 50px;
		padding-right: 0;

		& > ul {
			padding-bottom: 50px;
		}
	}

	.page-component__content {
		padding-left: 270px;
		padding-bottom: 100px;
		box-sizing: border-box;
	}

	.content {
		padding-top: 50px;

		pre {
			tab-size: 4;
		}

		& > h3 {
			margin: 55px 0 20px;
		}

		& > ul:not(.timeline) {
			margin: 10px 0;
			padding: 0 0 0 20px;
			font-size: 14px;
			color: #5e6d82;
			line-height: 2em;
		}

		& > table {
			border-collapse: collapse;
			width: 100%;
			background-color: #fff;
			font-size: 14px;
			margin-bottom: 45px;
			line-height: 1.5em;

			strong {
				font-weight: normal;
			}

			td,
			th {
				border-bottom: 1px solid #dcdfe6;
				padding: 15px;
				max-width: 250px;
			}

			th {
				text-align: left;
				white-space: nowrap;
				color: #909399;
				font-weight: normal;
			}

			td {
				color: #606266;
			}

			th:first-child,
			td:first-child {
				padding-left: 10px;
			}
		}
	}
}

@media (max-width: 768px) {
	.page-component {
		.page-component__nav {
			width: 100%;
			position: static;
			margin-top: 0;
		}

		.side-nav {
			padding-top: 0;
			padding-left: 50px;
		}

		.page-component__content {
			padding-left: 10px;
			padding-right: 10px;
		}

		.content {
			padding-top: 0;
		}

		.content > table {
			overflow: auto;
			display: block;
		}
	}
}
</style>
